<template>
  <div class="container">
    <!-- 背景粒子流 -->
    <div class="particle-bg"></div>
    
    <!-- 背景干扰噪点 -->
    <div class="noise-overlay"></div>
    
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 四角几何装饰 -->
      <div class="corner corner-tl"></div>
      <div class="corner corner-tr"></div>
      <div class="corner corner-bl"></div>
      <div class="corner corner-br"></div>
      
      <!-- 边框霓虹光带 -->
      <div class="neon-border"></div>
      
      <!-- 数据大屏顶部 -->
      <div class="top">
        <div class="glitch-effect"></div>
        <Top />
      </div>
      <div class="bottom">
        <div class="left">
          <Tourist class="tourist card"></Tourist>
          <Sex class="sex card"></Sex>
          <Age class="age card"></Age>
        </div>
        <div class="center">
          <Map class="map card"></Map>
          <Line class="line card"></Line>
        </div>
        <div class="right">
          <Rank class="rank card"></Rank>
          <Year class="year card"></Year>
          <Count class="count card"></Count>
        </div>
      </div>
      
      <!-- 数据流装饰 -->
      <div class="data-flow"></div>
      
      <!-- 扫描线 -->
      <div class="scan-line"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
// 引入子组件
import Top from './components/top/index.vue';
import Tourist from './components/left/tourist.vue'
import Sex from './components/left/sex.vue'
import Age from './components/left/age.vue'
import Map from './components/center/map.vue'
import Line from './components/center/line.vue'
import Rank from './components/right/rank.vue'
import Year from './components/right/year.vue'
import Count from './components/right/count.vue'

// 获取数据大屏DOM
let screen = ref();
const state = reactive({
  systemTime: new Date().toLocaleTimeString(),
  errorRate: (Math.random() * 2 + 0.5).toFixed(2),
  signalStrength: 97 // 新增信号强度指标
});

// 更新系统时间与信号强度
setInterval(() => {
  state.systemTime = new Date().toLocaleTimeString();
  // 随机小幅度更新错误率
  state.errorRate = (parseFloat(state.errorRate) + (Math.random() * 0.2 - 0.1)).toFixed(2);
  // 信号强度波动
  state.signalStrength = Math.max(95, Math.min(100, state.signalStrength + (Math.random() * 2 - 1)));
}, 1000);

onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  // 初始化霓虹点
  initNeonPoints();
  // 随机触发故障效果（更频繁）
  setInterval(() => {
    if (Math.random() > 0.75) triggerGlitch();
  }, 3000);
});

// 定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

// 监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  //重新创建粒子以适应新窗口大小
  createParticles();
}

// 初始化霓虹点（增加数量与3D效果）
function initNeonPoints() {
  const screenEl = screen.value;
  if (!screenEl) return;
  
  const colors = ['neon-pink', 'neon-blue', 'neon-purple', 'neon-green', 'cyan'];
  
  for (let i = 0; i < 60; i++) {
    const point = document.createElement('div');
    point.className = 'neon-point';
    // 随机颜色
    point.classList.add(colors[Math.floor(Math.random() * colors.length)]);
    
    point.style.left = `${Math.random() * 100}%`;
    point.style.top = `${Math.random() * 100}%`;
    point.style.width = `${Math.random() * 4 + 1}px`;
    point.style.height = point.style.width;
    point.style.animationDelay = `${Math.random() * 5}s`;
    // 添加3D深度感
    point.style.transform = `translateZ(${Math.random() * 200 - 100}px)`;
    screenEl.appendChild(point);
  }
}

// 触发故障效果
function triggerGlitch() {
  const glitchEl = document.querySelector('.glitch-effect');
  if (glitchEl) {
    glitchEl.classList.add('active');
    setTimeout(() => {
      glitchEl.classList.remove('active');
    }, 300);
  }
}
</script>

<style scoped lang="scss">
// 引入科幻风格字体（统一使用爬虫页字体）
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;600;800&family=Share+Tech+Mono&display=swap');

// 核心科技色彩体系（与爬虫页统一）
$neon-blue: #64ffda;      // 霓虹蓝（主色调）
$neon-purple: #9d4edd;    // 霓虹紫
$neon-pink: #f72585;      // 霓虹粉
$neon-green: #39ff14;     // 霓虹绿
$cyan: #00ffff;           // 青蓝色
$bg-dark: #0a192f;        // 深色背景
$bg-darker: #071123;      // 更深色背景
$bg-card: rgba(10, 25, 47, 0.85); // 卡片背景（玻璃态）
$grid-color: rgba(100, 255, 218, 0.1); // 网格色

// 核心动画（增强动态感）
@keyframes neonPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2); } // 增强亮度对比
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes dataScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 -1000px; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes noise {
  0% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

// 全局样式（统一科幻风格）
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // 多层背景效果（与爬虫页一致）
  background: 
    linear-gradient(45deg, #000b1a 0%, #0a192f 30%, #1b0f2e 60%, #2c0b30 100%),
    repeating-linear-gradient(90deg, 
      transparent 0%, 
      rgba(64,255,218,0.1) 20%, 
      transparent 40%,
      rgba(247,37,133,0.1) 60%,
      transparent 80%
    ),
    url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence baseFrequency="0.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
  color: #e6f1ff;
  font-family: 'Share Tech Mono', monospace;
  position: relative;
  z-index: 0;
  transform-style: preserve-3d;
  perspective: 1000px;

  // 网格背景（统一密度）
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(to right, $grid-color 1px, transparent 1px),
      linear-gradient(to bottom, $grid-color 1px, transparent 1px);
    background-size: 20px 20px; // 与爬虫页网格密度一致
    z-index: 1;
    pointer-events: none;
  }

  // 粒子背景（增强空间感）
  .particle-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: 
      radial-gradient(circle, rgba(100,255,218,0.1) 1px, transparent 1px),
      radial-gradient(circle, rgba(157,78,221,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    animation: float 30s linear infinite;
  }

  // 噪点 overlay（增强质感）
  .noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
    opacity: 0.3;
    z-index: 2;
    pointer-events: none;
    animation: noise 5s infinite linear;
  }

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    background: $bg-darker;
    // 边框增强（与爬虫页卡片边框一致）
    border: 2px dashed $neon-blue;
    border-radius: 12px;
    overflow: hidden;
    z-index: 3;
    // 发光阴影效果
    box-shadow: 0 0 80px rgba(100, 255, 218, 0.2), inset 0 0 40px rgba(100, 255, 218, 0.05);
    transform-style: preserve-3d;
    perspective: 2000px;
    // 边框渐变光效
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      background: linear-gradient(45deg, $neon-blue, $neon-purple, $neon-pink);
      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      opacity: 0.5;
      z-index: -1;
      animation: borderFlow 6s linear infinite;
    }

    // 霓虹边框（增强动态渐变）
    .neon-border {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 3px solid transparent;
      border-image: linear-gradient(
        45deg, 
        $neon-pink, 
        $cyan, 
        $neon-blue, 
        $neon-purple, 
        $neon-pink
      ) 1;
      pointer-events: none;
      z-index: 5;
      animation: neonPulse 2s infinite;
    }

    // 四角装饰（3D效果增强）
    .corner {
      position: absolute;
      width: 50px;
      height: 50px;
      border: 3px solid $neon-blue;
      z-index: 6;
      box-shadow: 0 0 20px $neon-blue;
      pointer-events: none;
      transform: translateZ(50px); // 3D突出效果
      opacity: 0.8;
    }
    .corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
    .corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
    .corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
    .corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

    // 霓虹点（增加颜色与动态）
    .neon-point {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: neonPulse 3s infinite;
      opacity: 0.9;
    }
    .neon-pink {
      background: $neon-pink;
      box-shadow: 0 0 15px $neon-pink;
    }
    .neon-blue {
      background: $neon-blue;
      box-shadow: 0 0 15px $neon-blue;
    }
    .neon-purple {
      background: $neon-purple;
      box-shadow: 0 0 15px $neon-purple;
    }
    .neon-green {
      background: $neon-green;
      box-shadow: 0 0 15px $neon-green;
    }
    .cyan {
      background: $cyan;
      box-shadow: 0 0 15px $cyan;
    }

    // 数据流（3D层叠效果）
    .data-flow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(to bottom, rgba(100, 255, 218, 0.1) 1px, transparent 1px),
        linear-gradient(to right, rgba(100, 255, 218, 0.05) 1px, transparent 1px);
      background-size: 100px 20px;
      animation: dataScroll 15s linear infinite;
      pointer-events: none;
      z-index: 2;
      transform: translateZ(-50px); // 3D后层效果
    }

    // 扫描线（增强发光效果）
    .scan-line {
      position: absolute;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, $cyan, $neon-green, transparent);
      box-shadow: 0 0 20px $neon-green;
      z-index: 4;
      pointer-events: none;
      animation: scan 3s linear infinite;
    }

    // 故障效果（增强干扰感）
    .glitch-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      z-index: 10;
      pointer-events: none;
      transition: all 0.3s;
      
      &.active {
        background: repeating-linear-gradient(
          45deg, 
          transparent,
          transparent 2px,
          rgba(247, 37, 133, 0.4) 2px,
          rgba(247, 37, 133, 0.4) 4px
        );
        animation: glitch 0.3s;
      }
    }

    .top {
      width: 100%;
      height: 130px;
      padding: 0 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(100, 255, 218, 0.1), transparent);
      border-bottom: 1px solid rgba(100, 255, 218, 0.3);
      position: relative;
      z-index: 3;

      .header-title {
        font-family: 'Orbitron', sans-serif;
        font-size: 42px;
        font-weight: 800;
        // 动态文字渐变（与爬虫页一致）
        background: linear-gradient(90deg, $neon-pink, $neon-purple, $neon-blue, $cyan);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 15px rgba(211, 0, 197, 0.5);
        letter-spacing: 2px;
        animation: borderFlow 5s ease infinite; // 复用边框流动动画
      }

      .status-panel {
        display: flex;
        align-items: center;
        gap: 25px;
        color: $neon-green;
        
        .status-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 5px 12px;
          background: rgba(10, 25, 47, 0.7);
          border: 1px solid rgba(57, 255, 20, 0.3);
          border-radius: 4px;
          
          .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: $neon-green;
            box-shadow: 0 0 8px $neon-green;
            animation: neonPulse 2s infinite;
          }
          
          .label {
            font-size: 14px;
          }
          
          .value {
            color: $neon-green;
            margin-left: 5px;
            font-family: 'Share Tech Mono', monospace;
          }
        }
        
        // 错误指标样式统一
        .error-indicator {
          border-color: rgba(237, 100, 166, 0.5);
          color: $neon-pink;
          
          .indicator {
            background: $neon-pink;
            box-shadow: 0 0 8px $neon-pink;
          }
        }

        // 新增信号强度指示器（与爬虫页一致）
        .signal-indicator {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 5px 12px;
          background: rgba(10, 25, 47, 0.7);
          border: 1px solid rgba(100, 255, 218, 0.3);
          border-radius: 4px;
          
          .signal-icon {
            color: $neon-blue;
          }
          
          .signal-bar {
            width: 80px;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            
            .signal-fill {
              height: 100%;
              background: linear-gradient(90deg, $neon-blue, $cyan);
              box-shadow: 0 0 8px $neon-blue;
 
              transition: width 1s ease;
            }
          }
          
          .signal-text {
            color: $neon-blue;
            font-family: 'Share Tech Mono', monospace;
            font-size: 14px;
          }
        }
      }
    }

    .bottom {
      display: flex;
      padding: 30px;
      gap: 30px;
      height: calc(100% - 130px);
      position: relative;
      z-index: 3;

      // 卡片样式（与爬虫页卡片统一）
      .card {
        position: relative;
        background: $bg-card;
        backdrop-filter: blur(8px); // 玻璃态效果
        border: 1px solid rgba(100, 255, 218, 0.3);
        border-radius: 6px;
        padding: 25px;
        overflow: hidden;
        transition: all 0.5s ease;
        transform-style: preserve-3d;
        perspective: 500px;
        // 顶部霓虹线
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, $neon-pink, $neon-blue, $cyan);
        }
        // 悬浮动画效果
        &:hover {
          transform: translateY(-8px) rotateY(2deg); // 3D翻转
          box-shadow: 0 0 30px rgba(100, 255, 218, 0.3);
          border-color: rgba(100, 255, 218, 0.6);
          animation: float 3s infinite alternate;
        }
      }

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;

        .tourist { flex: 1.3; }
        .sex { flex: 1; }
        .age { flex: 1; }
      }

      .center {
        flex: 1.6;
        display: flex;
        flex-direction: column;
        gap: 30px;

        .map {
          flex: 3;
          // 地图特殊效果增强
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70%;
            height: 70%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(100, 255, 218, 0.2), transparent 70%);
            border-radius: 50%;
            z-index: -1;
            filter: blur(20px);
            animation: neonPulse 6s infinite;
          }
        }
        .line { flex: 1; }
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;

        .rank { flex: 1.3; }
        .year { flex: 1; }
        .count { flex: 1; }
      }
    }
  }
}

// 卡片标题样式（统一风格）
:deep(.card-title) {
  position: relative;
  color: $neon-blue;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  padding-left: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    background: linear-gradient(to bottom, $neon-pink, $cyan);
  }

  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.3));
  }
}

// 统计数字样式（增强发光）
:deep(.stat-number) {
  font-family: 'Share Tech Mono', monospace;
  font-size: 48px;
  font-weight: bold;
  color: $neon-green;
  text-shadow: 0 0 10px $neon-green, 0 0 20px rgba(57, 255, 20, 0.5);
  position: relative;
  display: inline-block;
  animation: neonPulse 3s infinite;
  
  // 数字故障效果
  &::after {
    content: attr(data-value);
    position: absolute;
    left: 2px;
    top: 0;
    color: $neon-pink;
    text-shadow: 0 0 10px $neon-pink;
    opacity: 0.3;
    z-index: -1;
  }
}

// 列表项样式（统一交互）
:deep(.list-item) {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(100, 255, 218, 0.1);
  color: #e0f7ff;
  transition: all 0.3s ease;
  font-size: 14px;
  
  &:hover {
    color: $neon-blue;
    padding-left: 8px;
    transform: translateX(5px);
  }
  
  .rank-num {
    display: inline-block;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    margin-right: 12px;
    background: rgba(100, 255, 218, 0.1);
    color: $neon-blue;
    border: 1px solid rgba(100, 255, 218, 0.3);
  }
  
  .rank-value {
    color: $neon-pink;
    text-shadow: 0 0 5px rgba(247, 37, 133, 0.5);
  }
}

// 科幻风格滚动条（与爬虫页统一）
:deep(::-webkit-scrollbar) {
  width: 4px;
  height: 4px;
}
:deep(::-webkit-scrollbar-track) {
  background: rgba(10, 25, 47, 0.5);
  border-radius: 2px;
}
:deep(::-webkit-scrollbar-thumb) {
  background: linear-gradient(to bottom, rgba(100, 255, 218, 0.3), rgba(157, 78, 221, 0.3));
  box-shadow: 0 0 5px $neon-blue;
  border-radius: 2px;
}
:deep(::-webkit-scrollbar-thumb:hover) {
  background: linear-gradient(to bottom, rgba(100, 255, 218, 0.5), rgba(157, 78, 221, 0.5));
  box-shadow: 0 0 10px $neon-blue;
}

// 图表样式适配（统一色彩）
:deep(.chart-container) {
  width: 100%;
  height: calc(100% - 40px);
  
  .chart-line {
    stroke: $neon-pink;
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 0 4px $neon-pink);
  }
  
  .chart-area {
    fill: rgba(247, 37, 133, 0.15);
  }
  
  .chart-bar {
    fill: rgba(100, 255, 218, 0.6);
    stroke: $neon-blue;
    stroke-width: 1;
    transition: all 0.3s;
    
    &:hover {
      fill: rgba(100, 255, 218, 0.9);
      filter: drop-shadow(0 0 6px $neon-blue);
      transform: translateY(-3px);
    }
  }
  
  .axis text {
    fill: rgba(224, 247, 255, 0.7);
    font-size: 12px;
  }
  
  .axis line, .axis path {
    stroke: rgba(100, 255, 218, 0.2);
  }
}

// 标签样式统一
:deep(.el-tag--success) {
  background-color: rgba(72, 187, 120, 0.2);
  border-color: #48bb78;
  color: #48bb78;
  box-shadow: 0 0 12px rgba(72, 187, 120, 0.3);
  font-weight: 500;
}

:deep(.el-tag--danger) {
  background-color: rgba(237, 100, 166, 0.2);
  border-color: #ed64a6;
  color: #ed64a6;
  box-shadow: 0 0 12px rgba(237, 100, 166, 0.3);
  font-weight: 500;
}
</style>